<template>
	<view class="content">
		<u-modal v-model="show" :content="content" show-cancel-button='true' @confirm='confirm()'></u-modal>
		<u-tabs :list="list" :is-scroll="false" :current="current" @change="change" :bar-width="130"
			active-color="#002B56"></u-tabs>
		<view class="contentList" v-if="dataList.length!=0">
			<view class="list" @click="link(item.detectionOrderId)" v-for="(item,index) in dataList" :key='index'>
				<view class="listTop">
					订单编号：{{item.detectionOrderCode}}
				</view>
				<view class="listCenter">
					<image src="../../static/jctb.png" mode=""></image>
					<view class="listCenterT">
						<view class="titles">{{item.reportName}}</view>
						<view class="titlesBottom">
							<view>时间：{{item.createTime}}</view>
							<view class="money">¥{{item.totalAmount}}</view>
						</view>
					</view>
				</view>
				<view class="listDelBottom" v-if="item.orderState==2">
					<view class="listBottom">
						<view class="fk" @click.stop="qxdd(item.detectionOrderId)">申请退款</view>
					</view>
				</view>
				<view class="listDelBottom" v-if="item.orderState==6">
					<view class="listBottom">
						<view class="jxz">商家正在审核中</view>
					</view>
				</view>
				<view class="listDelBottom" v-if="item.orderState==7">
					<view class="listBottom" >
						<view class="jxz" id="wc">退款完成</view>
					</view>
				</view>
			</view>
		</view>
		<view v-else>
			<null></null>
		</view>
	</view>
</template>

<script>
	import API from "@/api/my.js"
	export default {
		data() {
			return {
				list: [{
					name: '已支付',
				}, {
					name: '退款中',
				}, {
					name: '已完成',
				}],
				current: 0,
				orderState:'',
				dataList:[],
				show: false,
				content: '确定取消订单吗',
				detectionOrderId:"",
			}
		},
		onLoad(option) {
			this.detectionOrder()
		},
		methods: {
			ckbg(detectionOrderId){
				uni.navigateTo({
					url:'/pagesB/meCarReport/meCarReport?detectionOrderId='+detectionOrderId
				})
			},
			confirm(){
				// let that = this;
				let data  = {
					detectionOrderId:this.detectionOrderId,
				}
				API.orderStatusCancel(data).then(res=>{
					// this.dataList = res.data
					console.log(res)
					that.detectionOrder();
				})
			},
			qxdd(detectionOrderId){
				// this.detectionOrderId = detectionOrderId;
				// this.show = true;
				uni.navigateTo({
					url:'/pagesB/delRefund/delRefund?detectionOrderId='+detectionOrderId
				})
			},
			change(index) {
				this.current = index;
				this.detectionOrder();
			},
			link(detectionOrderId){
				uni.navigateTo({
					url:'/pagesB/orderDetails/orderDetails?detectionOrderId='+detectionOrderId
				})
			},
			detectionOrder(){
				
				let that = this;
				let token = uni.getStorage({
					token: token
				})
				console.log(that.current)
				if(that.current==0){
					that.orderState=2
				}else if(that.current==1){
					that.orderState=6
				}else if(that.current==2){
					that.orderState=7
				}
				let data  = {
					token:token,
					page:1,
					limit:99999,
					orderState:this.orderState
				}
				API.detectionOrder(data).then(res=>{
					this.dataList = res.data
					console.log(res)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.list{
		margin-top: 7rpx;
	}
	.list {
		padding: 0 32rpx;
		background: #fff;
		
	}

	.listTop {
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
		font-size: 28rpx;
		color: #4F4F4F;
		border-bottom: 1px solid #EFEFEF;
	}

	.listCenter {
		display: flex;
		padding: 34rpx 0 43rpx;
		border-bottom: 1px solid #EFEFEF;
		image{
			width: 95rpx;
			height: 81rpx;
		}
	}
	.listCenterT{
		margin-left: 42rpx;
		width: 600rpx;
	}
	.titles{
		font-size: 30rpx;
		font-family: PingFangSC-Medium;
		color: #2C2C2C;
		
	}
	.titlesBottom{
		display: flex;
		justify-content: space-between;
		margin-top: 12rpx;
		font-size: 28rpx;
		color: #4F4F4F;
	}
	.money{
		font-family: PingFangSC-Medium;
		font-size: 34rpx;
		color: #FF552E;
	}
	.fk{
		background: #002B56;
		width: 136rpx;
		height: 68rpx;
		font-size: 28rpx;
		color: #FFFFFF;
		line-height: 68rpx;
		text-align: center;
		border-radius: 4rpx;
		margin-top: 12rpx;
		margin-left: 40rpx;
	}
	.fk1{
		color: #999999;
		height: 68rpx;
		font-size: 28rpx;
		line-height: 68rpx;
		text-align: center;
		border-radius: 4rpx;
		margin-top: 12rpx;
		margin-left: 40rpx;
	}
	.ckbg{
		background: #FD7E6E;
		width: 136rpx;
		height: 68rpx;
		font-size: 28rpx;
		color: #FFFFFF;
		line-height: 68rpx;
		text-align: center;
		border-radius: 4rpx;
		margin-top: 12rpx;
		margin-left: 40rpx;
	}
	.listBottom{
		height: 100rpx;
		line-height: 100rpx;
		display: flex;
		float: right;
		font-size: 28rpx;
	}
	.listDelBottom{
		height: 100rpx;
	}
	.jxz{
		font-size: 28rpx;
		color: #FF552E;
		text-align: center;
	}
	#wc{
		color: #7DE642;
	}
</style>
